import * as React from 'react';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import './index.module.scss';

const { memo, useMemo } = React;

function format(d: number) {
  const date = dayjs(d);
  return date.format('MM-DD') + ' ' + date.locale('zh-cn').format('ddd');
}

interface DetailProps {
  departDate: number | null;
  arriveDate: number | null;
  departTimeStr: string;
  arriveTimeStr: string;
  trainNumber: string;
  departStation: string;
  arriveStation: string;
  durationStr: string | null;
  children: React.ReactNode;
  time:string;
  dTime:string;
  aTime:string;
}
function Detail(props: DetailProps) {
  const {
    departDate,
    arriveDate,
    departTimeStr,
    arriveTimeStr,
    trainNumber,
    departStation,
    arriveStation,
    durationStr,
    time,
    dTime,
    aTime
  } = props;

  const departDateStr = useMemo(() => format(departDate || 0), [departDate]);
  const arriveDateStr = useMemo(() => format(arriveDate || 0), [arriveDate]);

  return (
    <div styleName="detail">
      <div styleName="content">
        <div styleName="left">
          <p styleName="city">{departStation}</p>
          <p styleName="time">{dTime}</p>
          <p styleName="date">{departDateStr}</p>
        </div>
        <div styleName="middle">
          <p styleName="train-name">{trainNumber}</p>
          <p styleName="train-mid">{props.children}</p>
          <p styleName="train-time">耗时{time}</p>
        </div>
        <div styleName="right">
          <p styleName="city">{arriveStation}</p>
          <p styleName="time">{aTime}</p>
          <p styleName="date">{departDateStr}</p>
        </div>
      </div>
    </div>
  );
}

export default memo(Detail);
